<template>
	<div class="header sys-dept">
		<el-form v-if="userInfo.permissions=='1'" :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
			<!-- <el-button v-has="'sys-dept-add'" type="primary" @click="addOrUpdateHandle()">添加
			</el-button> -->
			<!-- <el-button v-has="'sys-dept-delete'" type="danger" @click="delListHandle()">批量删除
			</el-button> -->
			<el-form-item label="类别" prop="declarationType">
				<el-select v-model="dataForm.declarationType" placeholder="请选择" @change="declarationTypeSelect" clearable>
					<el-option v-for="item in declarationTypeOptions" :key="item.value" :label="item.label"
						:value="item.value">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item prop="unitNumber">
				<el-input v-model="dataForm.unitNumber" placeholder="企业编号" clearable />
			</el-form-item>
			<el-form-item prop="idCard">
				<el-input v-model="dataForm.idCard" placeholder="身份证号(可部分号码)" clearable />
			</el-form-item>
			<el-form-item class="search-select">
			  <div class="block">
			    <span class="demonstration"></span>
			    <el-date-picker v-model="dateValue" type="daterange" range-separator="至" start-placeholder="开始日期"
			      end-placeholder="结束日期" @change="dateChange">
			    </el-date-picker>
			  </div>
			</el-form-item>
			<el-button type="primary" @click="getDataList">搜索</el-button>
			<el-button type="success" style="position: absolute; right: 30px;" @click="excelAllDataList">导出Excel
			</el-button>
		</el-form>
		<template>
			<el-table id="printTest" border :data="tableData.data" v-loading="tableData.loading"
				@selection-change="selectionChangeHandle" @sort-change="tableSortHandle" style="width: 100%"
				row-key="id">
				<!-- <el-table-column type="selection" align="center" width="40" /> -->
				<el-table-column type="index" :index="indexMethod" width="50" />
				<el-table-column prop="declarationType" label="类型">
					<template slot-scope="scope">
						<span v-if="scope.row.declarationType==0">退工</span>
						<span v-else-if="scope.row.declarationType==1">录用</span>
						<span v-else>其他</span>
					</template>
				</el-table-column>
				<el-table-column prop="name" label="员工姓名" />
				<el-table-column prop="idCard" label="身份证" />
				<el-table-column prop="post" label="从事岗位" />
				<el-table-column prop="contractType" label="合同类型" />
				<el-table-column prop="increaseReason" label="新增原因" />
				<el-table-column prop="salary" label="月缴费工资(元)">
					<template slot-scope="scope">
						{{Number(scope.row.salary/100).toFixed(2)}}
					</template>
				</el-table-column>
				<el-table-column prop="workType" label="用工类型" />
				<el-table-column prop="quitReason" label="退工原因" />
				<el-table-column prop="quitTime" label="退工时间">
					<template slot-scope="scope">
						<span v-if="scope.row.quitTime">{{scope.row.quitTime | formatDateYMD}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="remark" label="备注" />
				<el-table-column prop="contractStartTime" label="合同日期起">
					<template slot-scope="scope">
						<span v-if="scope.row.contractStartTime">{{scope.row.contractStartTime | formatDateYMD}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="contractEndTime" label="合同日期止">
					<template slot-scope="scope">
						<span v-if="scope.row.contractEndTime">{{scope.row.contractEndTime | formatDateYMD}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="unitNumber" label="单位编号" />
				<el-table-column prop="unitName" label="单位地址" />
				<el-table-column prop="unitAddress" label="单位名称" />
				<el-table-column prop="area" label="所属区镇" />
				<el-table-column prop="createTime" label="创建时间">
					<template slot-scope="scope">
						{{scope.row.createTime | formatDate}}
					</template>
				</el-table-column>
				<el-table-column prop="updateTime" label="修改时间">
					<template slot-scope="scope">
						{{scope.row.updateTime | formatDate}}
					</template>
				</el-table-column>
				<!-- <el-table-column fixed="right" label="操作" width="80">
					<slot slot-scope="scope">
						<el-button type="primary" size="mini" icon="el-icon-document"
							@click="addOrUpdateHandle(scope.row.id)" />
						<el-popconfirm title="确定删除吗？" @confirm="deleteHandle(scope.row.id)">
							<el-button type="danger" size="mini" icon="el-icon-delete" slot="reference" />
						</el-popconfirm>
					</slot>
				</el-table-column> -->
			</el-table>
		</template>
		<div style="text-align: right;">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="dataForm.pageNum" :page-sizes="[10, 50, 100, 200]" :page-size="dataForm.pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="tableData.total" />
		</div>
		<!-- 弹窗, 新增 / 修改 -->
		<!-- <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList()" /> -->
	</div>
</template>

<style lang="css" scoped>
</style>

<script>
	import {
		staffList,
		staffDel
	} from '@/api/enterprise/staff'

	import Blob from '../vendor/Blob'
	import Export2Excel from '../vendor/export2Excel'
	import {
		parseTime,
		salary,
		declarationType
	} from "../vendor/index" //引入已封装的秒转为时间的方法

	export default {
		components: {
			// AddOrUpdate
		},
		data() {
			return {
				userInfo: null,
				dataForm: {
					//当前页
					pageNum: 1,
					//每页显示条数
					pageSize: 10,
					unitNumber: '',
					idCard: ''
				},
				// ordMap: {},
				ids: [],
				tableData: {
					loading: false,
					// 总数
					total: 1,
					// 请求回来的数据
					data: []
				},
				dateValue: '',
				declarationTypeOptions: [{
						value: 1,
						label: '录用'
					},
					{
						value: 0,
						label: '退工'
					}
				],
			}
		},
		created() {
			if (this.$ls.get("unitNumber")) {
				this.dataForm.unitNumber = this.$ls.get("unitNumber")
			};
			if(this.$ls.get("userInfo")){
				this.userInfo = this.$ls.get("userInfo")
			};
			this.getDataList();
		},
		methods: {
			declarationTypeSelect(val) {
				console.log(val)
				this.dataForm.declarationType = val
			},
			dateChange(value) {
			  console.log(value)
			  if (value) {
			    this.dataForm.startTime = new Date(this.$moment(value[0]).format('YYYY-MM-DD HH:mm:ss'))
			    this.dataForm.endTime = new Date(this.$moment(value[1]).add(1, 'days').format('YYYY-MM-DD HH:mm:ss'))
			  } else {
			    this.dataForm.startTime = null
			    this.dataForm.endTime = null
			  }
			},
			// 索引列方法
			indexMethod(index) {
				return (this.dataForm.pageNum - 1) * this.dataForm.pageSize + index + 1;
			},
			// 分页功能
			handleSizeChange(val) {
				this.dataForm.pageSize = val;
				this.getDataList();
			},
			// 分页功能
			handleCurrentChange(val) {
				this.dataForm.pageNum = val;
				this.getDataList();
			},
			// 表格实现多选时的 change 事件
			selectionChangeHandle(params) {
				this.ids = [];
				params.map(item => this.ids.push(item.id));
			},
			tableSortHandle(obj, b) {
				// this.ordMap[obj.prop] = obj.order;
				// let ordList = [];
				// for (let key in this.ordMap) {
				// 	ordList.push({
				// 		prop: key,
				// 		order: this.ordMap[key]
				// 	})
				// }
				// this.dataForm.ordList = ordList;
				// this.searchClick()
			},
			// 获取数据列表
			getDataList() {
				if (!this.dataForm.unitNumber&&this.userInfo.permissions=='0') {
					this.error('提交后方可查询');
					return
				}
				this.tableData.loading = true;
				this.request(staffList, this.dataForm, this, data => {
					console.log(data)
					this.tableData.data = data.records;
					this.tableData.total = data.total;
					this.dataForm.pageNum = data.current;
					this.tableData.loading = false;
				})
			},
			searchClick() {
				this.dataForm.pageNum = 1;
				this.getDataList();
			},
			// addOrUpdateHandle(id) {
			// 	this.addOrUpdateVisible = true;
			// 	this.$nextTick(() => {
			// 		this.$refs.addOrUpdate.init(id);
			// 	})
			// },
			delListHandle() {
				if (this.ids.length === 0) return this.error('请先选择');
				this.alert('确定要删除吗？', () => this.deleteHandle());
			},
			deleteHandle(id) {
				let ids = id ? [id] : this.ids;
				console.log(ids)
				this.request(staffDel, ids, this, data => {
					(this.tableData.data.length - ids.length === 1 && this.dataForm.pageNum > 1) &&
					(--this.dataForm.pageNum);
					this.getDataList();
				});
			},
			// 获取数据列表
			excelAllDataList() {
				if (!this.dataForm.unitNumber&&this.userInfo.permissions=='0') {
					this.error('提交后方可查询');
					return
				}
				this.tableData.loading = true;
				let params = this.dataForm
				params.pageSize = 9999;
				this.request(staffList, params, this, data => {
					console.log(data)
					this.exportExcel(data.records);
				})
			},
			exportExcel(list) {
				require.ensure([], () => {
					const {
						export_json_to_excel
					} = require('../vendor/export2Excel.js'); //此处把路径要写对
					const tHeader = ['类型', '员工姓名', '身份证', '从事岗位', '合同类型', '新增原因',
						'月缴费工资（元）', '退工原因', '退工时间', '备注', '合同日期起', '合同日期止',
						'单位编号', '单位名称', '单位地址', '所属区镇', '创建时间', '修改时间'
					];
					const filterVal = ['declarationType', 'name', 'idCard', 'post', 'contractType',
						'increaseReason', 'salary', 'quitReason',
						'quitTime', 'remark', 'contractStartTime', 'contractEndTime', 'unitNumber',
						'unitName', 'unitAddress', 'area', 'createTime', 'updateTime'
					];
					// 上面的index、nickName、name是tableData里对象的属性
					// const list = this.tableData; //把data里的tableData存到list
					const data = this.formatJson(filterVal, list);
					export_json_to_excel(tHeader, data, '员工信息表' + this.$moment().format(
					'YYYY-MM-DD HH:mm:ss')); //"列表excel"  是下载后的表名 可修改

					this.tableData.loading = false;
				})
			},
			formatJson(filterVal, jsonData) {
				return jsonData.map(v => {
					v['declarationType'] = declarationType(v['declarationType'])
					v['createTime'] = parseTime(v['createTime'])
					v['updateTime'] = parseTime(v['updateTime'])
					v['salary'] = salary(v['salary'])
					v['contractStartTime'] = parseTime(v['contractStartTime'])
					v['contractEndTime'] = parseTime(v['contractEndTime'])
					v['quitTime'] = parseTime(v['quitTime'])
					return filterVal.map(j => v[j])
				})
			},
		}
	}
</script>
<style lang="less" scoped>
	/*去除页眉页脚*/
	//  @page{
	//    size:  auto;   /* auto is the initial value */
	//    margin: 3mm;  /* this affects the margin in the printer settings */
	//  }

	//  html{
	//    background-color: #FFFFFF;
	//    margin: 0;  /* this affects the margin on the html before sending to printer */
	//  }

	//  body{
	//    border: solid 1px blue ;
	//    margin: 10mm 15mm 10mm 15mm; /* margin you want for the content */
	//  }
	/*去除页眉页脚*/
</style>
